<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <script src="dragStatic/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/rem.js"></script>
    <script src="dragStatic/js/common.js"></script>
    <script src="preview/js/radialIndicator.js"></script>
    <script src="preview/js/jquery.zySlide.js"></script>
    <title>大数据单模块-今日推荐</title>
    <style>
        .zy-Slide {
            position: relative;
            width: 100%;
        }
        .zy-Slide ul {
            position: relative;
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .zy-Slide li {
            position: absolute;
            list-style: none;
            background: #000;
            width: 0;
            height: 0;
            z-index: 0;
            cursor: pointer;
            border-radius: 3px;
            margin: 0;
            padding: 0;
        }
        .zy-Slide li>img {
            width: 100%;
            height: 100%;
            vertical-align: top;
        }
        .reco-left{width: 2.82rem;height:3.4rem;float: left;}
        .reco-left p{
            position:absolute;
            padding:0 15%;
            font-size:0.16rem;
            bottom:4%;
            left:0;
            text-align: center;
            width: 100%;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-wrap: break-word;
        }
        .reco-left li a{
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50%;
            height: 50%;
        }
        .reco-left li a>img{
            max-width: 100%;
            width: 100%;
        }
        .reco-right{
            float: right;
            margin-top:0.8rem;
            width: 1.7rem;
            height: 2.2rem;
            border:0.1rem solid #281446;
            background-color: rgba(18, 2, 45, 0.74);
            border-radius: 0.2em;
            box-shadow:1px 1px 0.2rem #12022d;
            -moz-box-shadow:1px 1px 0.15rem #12022d;
            -webkit-box-shadow:1px 1px 0.15rem #12022d;
            text-align: center;
            padding-top:0.12rem;
        }
        .reco-right-up{padding-bottom:0.12rem;border-bottom:1px solid #2f2f3a;}
        .reco-right-down{padding-top:0.12rem;position: relative;}
        .reco-right-down .circleStart{
            position: absolute;
            top:0.05rem;
            left:50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
            width: 0.06rem;
            height: 0.22rem;
            background-color: #fff;
        }
        /*1366下面*/
        @media screen and (max-width: 220px) {
            .module-title{
                margin-bottom: 0.16rem;
            }
            .reco-left p{
                bottom: -5%;
            }
        }

    </style>
</head>
<body>
<div class="reco">
    <div class="module-title ycenterbox"><img src="preview/img/listimg.png" /><span class="section_name" data-key="today_recom_str">今日推荐</span></div>
    <div class="reco-content">
        <div class="reco-left zy-Slide zy-Slide2"></div>
        <div class="reco-right">
            <div class="reco-right-up">
                <p>扫码看书</p>
                <label>已扫码借阅</label>
            </div>
            <div class="reco-right-down">
                <div class="circleStart"></div>
                <div id="indicatorContainer"></div>
            </div>
        </div>
    </div>
    <div class="block"></div>
</div>
</body>
<script>
    var currentFontSize;
    var recommend_move_flag=false,code_url,img_url,rec_str,read_num=0,change_timer;
    function getchange(){
        clearTimeout(change_timer);////每次清空定时器
        $('.reco-right-down canvas').remove();///每次删除圈
        radialObj = radialIndicator('#indicatorContainer', {
            radius:40*currentFontSize/100, //定义圆形指示器的内部的圆的半径。
            barBgColor: "#2f2f3a", //定义圆形指示器的刻度条的背景颜色。
            barColor: '#fff', //指示器数值样式
            barWidth: 3*currentFontSize/100,
            minValue: 0, //圆形指示器的最小值。
            maxValue: read_num/0.65,
            fontSize:24*currentFontSize/100,
            displayNumber: true,
            roundCorner: true,
            format:' 人'
        });
        //radialObj.value(parseInt(read_num),parseInt(total));
        radialObj.animate(read_num);
        change_timer=setTimeout(getchange,20000);
    }
    window.onresize = function(){
        page_init(100,515,"今日推荐");
        currentFontSize=page_init(100,515,"今日推荐");

    };
    window.onload = function(){
        page_init(100,515,"今日推荐");
        currentFontSize=page_init(100,515,"今日推荐");
        var gobalAddr="whfw.superlib.com:9025";
        var wsPath = "wss://" + gobalAddr + "/cxts/websocket/jrtj";
        today_recommend(wsPath);
        //今日推荐
        var websocket_recommend;
        //最大重连次数
        var max_try_num_jrtj = 10;
        var curr_try_num_jrtj = 0;
        function today_recommend(ws_url){
            curr_try_num_jrtj++;
            try{
                websocket_recommend=new WebSocket(ws_url);//参数是服务器地址，还有一个参数是自协议可以不写
                websocket_recommend.onopen=function(res){
                    console.log('info ---->> 今日推荐连接成功...');
                };
                websocket_recommend.onmessage=function(msg){
                    var json = JSON.parse(msg.data);
                    var data = json.data;
                    if (data == null || data == undefined || data.length == 0) {
                        console.log("warning ---->> 今日推荐无数据返回...");
                        return;
                    }
                    console.log('info ---->> 今日推荐数据更新了...');
                    $('.today_recomeImg').html('');   //清空resText里面的所有内容
                    rec_str='';
                    $.each(data, function(i, e){
                        var isImgShow=e.f_book_img.indexOf("http");///如果以http开头说明不等于-1，说明不用拼接地址
                        var isCodeShow=e.f_2dimension_code_url.indexOf("http");
                        if(isImgShow==0){
                            img_url=e.f_book_img;////书封地址
                        }else{
                            ///说明不是打头http,要拼接地址
                            img_url='https://'+gobalAddr+e.f_book_img;////书封地址拼接
                        }
                        if(isCodeShow==0){
                            code_url=e.f_2dimension_code_url;////二维码
                        }else{
                            code_url='https://'+gobalAddr+e.f_2dimension_code_url;////拼接二维码的链接地址

                        }
                        rec_str+='<li><img class="bcover" src="'+img_url+'" data-total="800" data-title="'+e.f_book_name+'" data-to="'+e.f_read_count+'"/><a title="123"><img src="'+code_url+'" /></a></li>';
                    });
                    $('.reco-left').append(rec_str);
                    $('.reco-left').zySlide({ speed: 500,type:2,delay: 6000}).css('border', '0px solid blue');
                    divFlex("reco");////调用缩放功能
                    read_num = 0;
                    $(".reco-left li").each(function (i, el) {
                        read_num+=parseInt($(el).find("img").attr("data-to"));
                    });
                    getchange();
                };
                websocket_recommend.onclose=function(e){
                    if (curr_try_num_jrtj <= max_try_num_jrtj) {
                        console.log("warning ---->> 今日推荐连接关闭，6秒后重新连接...");
                        setTimeout(function () {
                            today_recommend(wsPath);
                        }, 6000);
                    } else {
                        console.log("warning ---->> 今日推荐连接超过最大重连次数，不再重连...");
                    }
                };
                websocket_recommend.onerror = function () {
                    console.log("error ---->> 今日推荐连接发生错误...");
                };
            } catch (e) {
                console.log("error ---->> 今日推荐连接发生错误...");
            }

        }
    }

</script>

</html>